<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../css/horselist.css">
  <title>Document</title>
</head>
<body>
  <div class="layui-fluid" id="imgContent">
    <!-- 导航部分 -->
    <div class="nav">
      <img src="../img/whitelogo.jpg" alt="">
      <div class="nav-na">
        <span>首页</span>
        <span>我要买马</span>
        <span>交易流程</span>
        <span>平台服务</span>
        <span>个性需求</span>
        <span>合作伙伴</span>
        <span>关于我们</span>
      </div>
      <section class="nav-input">
        <i class="layui-icon layui-icon-search"></i>
        <input type="text" placeholder="搜索">
        <span>登录</span>
      </section>
    </div>
    <!-- 导航结束部分 -->
    <!-- 导航下面所有的部分 -->
    <div class="all-content">
      <!-- 面包开始部分 -->
        <section class="layui-breadcrumb">
          <a href="">首页</a>
          <a href="" style="font-weight:bold;">我要买马</a>
        </section>
      <!-- 面包结  束部分 -->
      <!-- 筛选开始部分 -->
      <div class="screen-content">
        <section class="screen">
          <img src="../img/shaixuan.png" alt="">
          <span>筛选</span>
        </section>
        <section class="screen-font">
          <span>
            品种
            <i class="layui-icon layui-icon-triangle-d"></i>
          </span>
          <span v-on:click="ability()">能力<i class="layui-icon layui-icon-triangle-d"></i></span>
          <span>年龄<i class="layui-icon layui-icon-triangle-d"></i></span>
          <span>适合人群<i class="layui-icon layui-icon-triangle-d"></i></span>
        </section>
        <span style="float:right;padding-top:15px;clear:both;" v-on:click="more()">更多筛选条件<i class="layui-icon layui-icon-triangle-d"></i></span>
      </div>
      <!-- 筛选结束部分 -->
      <!-- 筛选条件开始部分 -->
      <!-- 筛选条件结束部分 -->
      <div class="ceal">
        <div class="conditions" v-show="ture">
          <form class="layui-form" action="index.html" method="post">
            <section class="conditions-price">
              <article class="art-peal">
                <span>价格</span>
                <span style="padding-left:394px;">￥0万-￥1000以上</span>
              </article>
              <div class="layui-form-item">
                <div class="layui-inline" style="text-align:center;">
                  <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid">-</div>
                  <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
            </section>
            <section class="conditions-price">
              <article class="art-peal">
                <span>身高</span>
                <span style="padding-left:394px;">1.2米 - 1.5米</span>
              </article>
              <div class="layui-form-item">
                <div class="layui-inline" style="text-align:center;">
                  <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid">-</div>
                  <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
            </section>
            <section class="conditions-price">
              <div class="layui-form-item">
                <article style="padding-bottom:15px;">性别</article>
                <div class="sex-input">
                  <input type="radio" name="sex" value="公" title="公">
                  <input type="radio" name="sex" value="母" title="母">
                  <input type="radio" name="sex" value="煽" title="煽">
                </div>
              </div>
            </section>
            <section class="conditions-price">
              <div class="layui-form-item">
                <article style="padding-bottom:15px;">
                  <label>血统</label>
                </article>
                <div>
                  <input type="checkbox" name="like1[write]" lay-skin="primary" title="比利时">
                  <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                    <span>比利时</span>
                    <i class="layui-icon layui-icon-ok"></i>
                  </div>
                  <input type="checkbox" name="checkbox1" lay-skin="primary" title="瑞士">
                  <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                    <span>瑞士</span>
                    <i class="layui-icon layui-icon-ok"></i>
                  </div>
                  <input type="checkbox" name="checkbox1" lay-skin="primary" title="新西兰">
                  <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                    <span>新西兰</span>
                    <i class="layui-icon layui-icon-ok"></i>
                  </div>
                </div>
                <section>
                  <label for="">查看所有血统</label>
                  <i class="layui-icon layui-icon-down"></i>
                </section>
                </div>
              </section>
                <div class="conditions-price layui-form-item">
                  <article style="padding-bottom:15px;">
                    <label>性格</label>
                  </article>
                  <div>
                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="比利时">
                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                      <span>温顺</span>
                      <i class="layui-icon layui-icon-ok"></i>
                    </div>
                    <input type="checkbox" name="checkbox1" lay-skin="primary" title="瑞士">
                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                      <span>积极</span>
                      <i class="layui-icon layui-icon-ok"></i>
                    </div>
                    <input type="checkbox" name="checkbox1" lay-skin="primary" title="新西兰">
                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                      <span>刚烈</span>
                      <i class="layui-icon layui-icon-ok"></i>
                    </div>
                  </div>
                </div>
                <section class="form-button">
                  <span  v-on:click="cancel">取消</span>
                  <input type="reset" value="清空筛选条件" style="background:#fff;border:none;font-weight:bold;font-size:18px;margin-right:15px;">
                  <button type="button" name="button">确认</button>
                </section>
          </form>
        </div>
        <!-- 右边筛选效果 -->
        <div class="right-conditions"  v-show="OK" id="right_reset">
          <form class="layui-form" action="index.html" method="post">
            <section>
              <input type="checkbox" name="teaching" title="竞速马" lay-skin="primary" value="竞速马">
            </section>
            <section>
              <input type="checkbox" name="teaching" title="盛装舞步" lay-skin="primary" value="盛装舞步">
            </section>
            <section>
              <input type="checkbox" name="teaching" title="教学马" lay-skin="primary" value="教学马">
            </section>
            <section>
              <input type="checkbox" name="teaching" title="障碍" lay-skin="primary" value="障碍">
            </section>
            <section class="right-button">
            <span v-on:click="abilitys()">取消</span>
            <input type="reset" value=重置 style="background:#fff;border:none;">
            <button type="button" name="button" v-on:click="inputValue()">确定</button>
            </section>

          </form>
        </div>
        <!-- 右边筛选效果结束 -->
        <div>
          <div class="img-content" v-for="val , index in horse_contents">
              <section class="img-peal">
                <article class="img-name">
                  {{ val.name }}
                </article>
                <article class="img-price">
                  价格
                </article>
                <article class="img-number">
                  <span>￥</span>
                  <span>{{ parseInt(val.price) }}</span>
                  <span>万</span>
                </article>
                <article class="img-see">
                  <span>查看详情</span>
                  <img src="../img/forword.png" alt="">
                </article>
              </section>
              <section class="img-box"></section>
              <figure class="img-img">
                <img src="../img/horselistimg.jpg" alt="" style="width:621px;height:518px;">
              </figure>
              <section class="img-bottom">
                <article class="img-font">
                  <p>障碍赛</p>
                  <span>{{ val.height }}</span>
                  <span>米</span>
                </article>
                <article class="img-font">
                  <p>性别</p>
                  <span>{{sex[val.sex]}}</span>
                </article>
                <article class="img-font">
                  <p>年龄</p>
                  <span>{{ val.age }}</span>
                  <span>岁</span>
                </article>
                <article class="img-font">
                  <p>品种</p>
                  <span>{{ val.variety }}</span>
                </article>
              </section>
          </div>
        </div>
      </div>
      <!-- 底部照片内容 -->


      <!-- 底部照片内容 -->
    </div>
    <!-- 导航下面所有的结束部分 -->
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
//vue的使用方式
const apihost = "http://47.105.34.213/index.php/backend/horse";
var vm = new Vue({
el: '#imgContent',
data: {
  horse_contents: {},
  sex:{
    1:'公',
    2:'母',
    3:'煽'
  },
  OK: false,
  ture: false
},
created:function(){
    this.getInfo();
},
methods: {
  getInfo:function(){
    var self = this;
    axios.get(apihost+"backend/horse").then(function(response){
          var data = response.data;
          if(response.status == 200){
                  self.horse_contents = data.data;
                  console.log(self.horse_contents);
          }
    }).catch(function(response){
          console.log('错误的内容');
    });
  },
  ability: function () {
      this.OK = !this.OK;
  },
  abilitys:function () {
      this.OK = false;
  },
  more: function() {
    this.ture = !this.ture;
  },
  cancel: function () {
    this.ture = false;
  },
  inputValue: function () {
    var obj = document.getElementsByName('teaching');
    check_val = [];
    for(k in obj){
      if(obj[k].checked)
            check_val.push(obj[k].value);
    }

  }
}
});
  // 初始化layui模板
  layui.use(['element','form'],function(){
    var element = layui.element;
    var form = layui.form;
  });
</script>
</html>
